<template>
	<div class="spread con style_index">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/styleinfo' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>款式信息</el-breadcrumb-item>
		</el-breadcrumb>
		<div>
			<span class="demonstration">时间:</span>
			<!-- <el-date-picker
		      v-model="rantime"
		      value-format="yyyy-MM-dd HH:mm:ss"
		    
		      type="datetimerange"
		      range-separator="至"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期">
		    </el-date-picker> -->

			<el-date-picker
				v-model="rantime"
				value-format="yyyy-MM-dd"
				type="daterange"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				:default-time="['00:00:00', '23:59:59']"
			></el-date-picker>

			<span class="juli">销售价:</span>
			<el-input v-model="sprice" placeholder="请输入值" style="width:15%"></el-input>
			<span>-</span>
			<el-input v-model="eprice" placeholder="请输入值" style="width:15%"></el-input>
		</div>
		<div style="margin-top:15px;">
			<span>款号:</span>
			<el-input v-model="keyword" placeholder="请输入款号" style="width:15%"></el-input>
			<span class="juli">风格:</span>
			<el-input v-model="style" placeholder="请输入风格内容" style="width:15%"></el-input>

			<span class="juli">主题:</span>
			<el-input v-model="subject" placeholder="请输入主题内容" style="width:15%"></el-input>
			<span class="juli">主石规格:</span>
			<el-input v-model="ifmodel" placeholder="请输入主石规格内容" style="width:15%"></el-input>
		</div>
		<div style="margin-top:15px;">
			<span>款式:</span>
			<el-select v-model="fashion" filterable placeholder="请选择">
				<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
			</el-select>

			<span class="juli">排序:</span>
			<el-select v-model="sort" placeholder="请选择" class="sort">
				<el-option label="库存由低到高" :value="1"></el-option>
				<el-option label="库存由高到低" :value="2"></el-option>
				<el-option label="销售件数由低到高" :value="3"></el-option>
				<el-option label="销售件数由高到低" :value="4"></el-option>
				<el-option label="期间销售由低到高" :value="5"></el-option>
				<el-option label="期间销售由高到低" :value="6"></el-option>
			</el-select>
			<span class="juli">专利:</span>
			<el-input v-model="patent" placeholder="请输入专利内容" style="width:15%"></el-input>

			<span class="juli">专款:</span>
			<el-input v-model="special" placeholder="请输入专款内容" style="width:15%"></el-input>

			<span class="juli">款式来源:</span>
			<el-input v-model="designer" placeholder="请输入 款式来源内容" style="width:15%"></el-input>
		</div>

		<div style="margin-top:15px;margin-left: 40px;margin-bottom:10px;">
			<el-button type="primary" icon="el-icon-search" @click="handerSearch">搜索</el-button>

			<el-button-group v-if="this.userInfo.username == 'admin'">
				<el-button type="danger" icon="el-icon-tickets" @click="detailList()">详情</el-button>
				<el-button type="danger " icon="el-icon-download" class="juli" @click="excelDown">导出Excel</el-button>
			</el-button-group>

			<el-button-group v-else>
				<template v-for="item in btt">
					<el-button type="danger" v-if="item == 8" icon="el-icon-tickets" @click="detailList()">详情</el-button>
					<el-button type="danger " v-if="item == 9" class="juli" icon="el-icon-download" @click="excelDown">导出Excel</el-button>
				</template>
			</el-button-group>

			<div style="float:right ">
				<span class="el-pagination__total" style="margin-left: 20px;">共 {{ page.total }} 条数据</span>
			</div>
		</div>

		<el-table
			v-loading="loading"
			element-loading-text="拼命加载中"
			:data="tableData"
			style="width: 100%"
			:height="tableHeight"
			border
			fit
			highlight-current-row
			@current-change="shandleCurrentChange"
			@sort-change="tableSortChange"
		>
			<el-table-column label="缩略图" width="100" align="center" fixed prop="desc">
				<template slot-scope="scope">
					<img width="60" height="60" :src="scope.row.img_url" />
				</template>
			</el-table-column>
			<el-table-column label="款号" width="140" fixed prop="FModel" sortable>
				<template slot-scope="scope">
					<span>{{ scope.row.FModel }}</span>
				</template>
			</el-table-column>
			<el-table-column label="厂款号" width="120" fixed prop="FItemFactoryStyle" sortable>
				<template slot-scope="scope">
					<span>{{ scope.row.FItemFactoryStyle }}</span>
				</template>
			</el-table-column>

			<el-table-column label="款式分类" width="100" fixed>
				<template slot-scope="scope">
					<span>{{ scope.row.FChartNumber }}</span>
				</template>
			</el-table-column>
			<el-table-column label="风格分类" width="100" fixed>
				<template slot-scope="scope">
					<span>{{ scope.row.style }}</span>
				</template>
			</el-table-column>
			<el-table-column label="主题分类" width="110" fixed>
				<template slot-scope="scope">
					<span>{{ scope.row.subject }}</span>
				</template>
			</el-table-column>

			<el-table-column label="专利" width="120">
				<template slot-scope="scope">
					<span>{{ scope.row.patent }}</span>
				</template>
			</el-table-column>

			<el-table-column label="专款" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.special }}</span>
				</template>
			</el-table-column>
			<el-table-column label="款式来源" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.designer }}</span>
				</template>
			</el-table-column>

			<el-table-column label="银版号" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.pagenum }}</span>
				</template>
			</el-table-column>
			<el-table-column label="主成色" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.Fversion }}</span>
				</template>
			</el-table-column>
			<el-table-column label="主石类型" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.Falias }}</span>
				</template>
			</el-table-column>
			<el-table-column label="主石规格" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.ifmodel }}</span>
				</template>
			</el-table-column>
			<el-table-column label="销售价" width="100" prop="FSalePrice" sortable>
				<template slot-scope="scope">
					<span>{{ Math.floor(scope.row.FSalePrice) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="制作供应商" width="120">
				<template slot-scope="scope">
					<span>{{ scope.row.FSupplyIDName }}</span>
				</template>
			</el-table-column>

			<el-table-column label="库存数" width="100" prop="fauxjc" sortable>
				<template slot-scope="scope">
					<span>{{ Math.floor(scope.row.fauxjc) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="销售件数" width="120" prop="fauxxs" sortable>
				<template slot-scope="scope">
					<span>{{ Math.floor(scope.row.fauxxs) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="期间销售" width="120" prop="fauxqj" sortable>
				<template slot-scope="scope">
					<span>{{ Math.floor(scope.row.fauxqj) }}</span>
				</template>
			</el-table-column>

			<!--
		    <el-table-column label="操作">
		      <template slot-scope="scope">
		       
		        <el-button
		          size="mini"
		          type="danger is-round"
		          @click="detailList(scope.row.order_sn)">详情</el-button>
		      </template>
		    </el-table-column>  -->
		</el-table>

		<div class="block el-pagination" style="margin-top: 0px; overflow: hidden;">
			<el-pagination
				class="pages"
				background
				layout="prev, pager, next"
				:total="page.total"
				:page-size="page.size"
				@current-change="handleCurrentChange"
				:current-page.sync="page.currentPage"
			></el-pagination>
		</div>

		<el-dialog title="附件下载" :visible.sync="fileDwonload"><el-button type="primary" @click="downloadFile()">wenjian</el-button></el-dialog>
	</div>
</template>

<script type="text/javascript">
export default {
	data() {
		var sdDate = [];
		return {
			loading: false,
			tableData: [],
			tableHeight: window.innerHeight - 403 < 560 ? 700 : window.innerHeight - 403,
			token: '',
			keyword: '',
			rantime: [],
			currentRow: [],
			arr: [],
			listQuery: { sortby: '', order: 'desc' },
			fileDwonload: false,
			url: '',
			page: {
				total: 0,
				size: 0,
				currentPage: 1,
				num: 1
			},
			sort: 1,
			btt: [],
			options: [
				{
					id: 1,
					name: '耳饰'
				},
				{
					id: 2,
					name: '项链'
				},
				{
					id: 3,
					name: '吊坠'
				},
				{
					id: 4,
					name: '胸针'
				},
				{
					id: 5,
					name: '手链'
				},
				{
					id: 6,
					name: '戒指'
				},
				{
					id: 7,
					name: '手镯'
				},
				{
					id: 8,
					name: '耳扣'
				},
				{
					id: 9,
					name: '耳钉'
				},
				{
					id: 10,
					name: '耳坠'
				},
				{
					id: 0,
					name: '全部'
				}
			],
			fashion: 0,
			style: '',
			subject: '',
			sprice: '',
			eprice: '',
			patent: '',
			special: '',
			designer: '',
			ifmodel: ''
		};
	},

	created() {
		// console.log(this.tableHeight,window.innerHeight-403,6666)
		this.token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
		this.getTime();
		var user = this.getCookie('user_info');
		if (user) {
			this.userInfo = JSON.parse(user);
			this.btt = this.userInfo.blist.split(',');
		}

		if (this.$route.query.look) {
			let look = JSON.parse(this.$route.query.look);
			if (look.length != -1) {
				this.getLookLikeList();
			} else {
			}
		} else {
			this.getstyleList();
		}
	},
	mounted() {
		const that = this;
		// 动态设置表格高度适应窗口
		window.onresize = () => {
			let a = window.innerHeight;
			that.tableHeight = a - 403;
		};
		this.getCookie('user_info');
	},
	methods: {
		getLookLikeList() {
			this.loading = true;
			let look = JSON.parse(this.$route.query.look);

			// let {FChartNumber,style,ifmodel,FSalePrice} = look;
			// let view =look;
			// FChartNumber   style  ifmodel  FSalePrice
			let view = {
				FChartNumber: look.FChartNumber,
				style: look.style,
				ifmodel: look.ifmodel,
				FSalePrice: look.FSalePrice,
				page: this.page.num,
				time: ''
			};
			axios
				.post('/api/style/view', {
					FChartNumber: look.FChartNumber,
					style: look.style,
					ifmodel: look.ifmodel,
					FSalePrice: look.FSalePrice,
					page: this.page.num,
					time: ''
				})
				.then(res => {
					if (res.data.code == 200) {
						this.tableData = res.data.result.data;
						this.page.total = res.data.result.total;
						this.page.size = res.data.result.per_page;
						this.page.per_page = res.data.result.last_page;
						this.loading = false;
					} else {
						this.$notify.error({
							title: '错误',
							message: res.data.message
						});
					}
				})
				.catch(error => {
					this.$notify.error({
						title: '错误',
						message: res.data.message
					});
				});
		},

		getstyleList() {
			this.loading = true;
			axios
				.get(
					'/api/style/stylelist?page=' +
						this.page.num +
						'&keyword=' +
						this.keyword +
						'&time=' +
						this.rantime +
						'&fashion=' +
						this.fashion +
						'&style=' +
						this.style +
						'&subject=' +
						this.subject +
						'&patent=' +
						this.patent +
						'&special=' +
						this.special +
						'&designer=' +
						this.designer +
						'&ifmodel=' +
						this.ifmodel +
						'&sprice=' +
						this.sprice +
						'&eprice=' +
						this.eprice +
						'&sort=' +
						this.sort
				)
				.then(result => {
					if (result.data.code == 200) {
						this.tableData = result.data.result.data;
						this.page.total = result.data.result.total;
						this.page.size = result.data.result.per_page;
						this.page.per_page = result.data.result.last_page;
						this.loading = false;
					} else {
						this.$notify.error({
							title: '错误',
							message: result.data.message
						});
					}
				})
				.catch(error => {
					this.$notify.error({
						title: '错误',
						message: result.data.message
					});
				});
		},
		//时间

		shandleCurrentChange(data) {
			this.currentRow = data;
		},
		tableSortChange(column) {
			if (column.order === 'descending') {
				this.listQuery.sortby = column.prop;
				this.listQuery.order = 'desc';
			} else {
				this.listQuery.sortby = column.prop;
				this.listQuery.order = 'asc';
			}
			// console.log(column,column.prop);
			//this.getstyleList();
		},
		excelDown() {
			axios
				.get(
					'/excel/export?t=1&keyword=' +
						this.keyword +
						'&time=' +
						this.rantime +
						'&fashion=' +
						this.fashion +
						'&style=' +
						this.style +
						'&subject=' +
						this.subject +
						'&patent=' +
						this.patent +
						'&special=' +
						this.special +
						'&designer=' +
						this.designer +
						'&ifmodel=' +
						this.ifmodel +
						'&sprice=' +
						this.sprice +
						'&eprice=' +
						this.eprice +
						'&sort=' +
						this.sort
				)
				.then(result => {
					if (result.data.code == 200) {
						this.fileDwonload = true;
						this.url = result.data.result;
					} else {
						this.$notify.error({
							title: '错误',
							message: result.data.message
						});
					}
				})
				.catch(error => {});
		},
		getCookie(name) {
			var arr,
				reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
			if ((arr = document.cookie.match(reg))) {
				return unescape(arr[2]);
			} else {
				return null;
			}
		},
		downloadFile() {
			window.open('/api/download?d=' + this.url);
		},
		detailList() {
			if (this.currentRow.length <= 0) {
				this.$notify({ type: 'error', message: '请选择一行' });
				return false;
			}
			this.arr.push({
				fid: this.currentRow.fid,
				FModel: this.currentRow.FModel,
				fauxxs: this.currentRow.fauxxs
			});
			//console.log(this.arr);
			this.$router.push({ path: '/api/style/detail?dd=' + JSON.stringify(this.currentRow) });
		},
		handleEdit(index, row) {
			// console.log(index, row);
			axios.get('/api/order/status?id=' + row.id + '&type=1' + '&order_sn=' + row.order_sn).then(res => {
				this.$notify({
					type: 'success',
					title: '状态更新成功',
					message: res.data.message
				});
				this.getGoodsList();
			});
		},
		handerSearch() {
			this.page.num = 1;
			this.getstyleList();
		},

		handleCurrentChange(val) {
			this.page.num = val;
			this.getstyleList();
		},
		handleDelete(index, row) {
			// console.log(index, row);
			axios.get('/api/order/status?id=' + row.id + '&type=2' + '&order_sn=' + row.order_sn).then(res => {
				this.$notify({
					type: 'success',
					title: '状态更新成功',
					message: res.data.message
				});
				this.getGoodsList();
			});
		},
		addTime(m) {
			return m < 10 ? '0' + m : m;
		},

		getTime() {
			var date = new Date();
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			// console.log(d)
			let time = y + '-' + m + '-' + d;
			let d1 = '01';
			let time1 = y + '-' + m + '-' + d1;
			this.rantime[0] = time1;
			this.rantime[1] = time;
		},

		timeFormat(shijianchuo) {
			//shijianchuo是整数，否则要parseInt转换
			var time1 = new Date(shijianchuo);
			var y = time1.getFullYear();
			var m = time1.getMonth() + 1;
			var d = time1.getDate();
			var h = time1.getHours();
			var mm = time1.getMinutes();
			var s = time1.getSeconds();
			return y + '-' + this.addTime(m) + '-' + this.addTime(d) + ' ' + this.addTime(h) + ':' + this.addTime(mm) + ':' + this.addTime(s);
		}
	}
};
</script>

<style lang="scss">
	.style_index{
		.sort.el-select .el-input {
			width: 140px;
		}
		.el-table .warning-row {
			background: oldlace;
		}
		
		.input-with-select .el-input-group__prepend {
			background-color: #fff;
		}
		.el-table .success-row {
			background: #f0f9eb;
		}
		.con {
			.el-breadcrumb {
				height: 40px;
			}
			.juli {
				margin-left: 10px;
			}
		}
		.el-pagination__total {
			float: left;
			margin-top: 2px;
		}
		.pages {
			float: right;
		}
		.juli {
			margin-left: 5px;
		}
		
	}
	.el-pagination{float: right}
	.el-button-group {
		position: relative;
		top: -1px;
		margin-left: 10px;
		.el-button:first-child{
			border-radius: 4px;
			margin-right: 15px;
		}
		.el-button:last-child{
			border-radius: 4px;
		}
	}

</style>